<template>
    <div class="fix-width-frame">
        <logo class="header_logo"></logo>

        <div class='tip'>
            <span>下单须知：</span>当日18点前下单，当日发货并输出物流信息，超过18点则次日发货并输出信息
        </div>
        <div class='tip'>
            <span>发货须知：</span>【菜鸟-申通-石狮】福建泉州发货 【菜鸟-百世汇通-义乌】浙江义乌发货
        </div>
        <div class="table_container">
            <div class="label-title">
                <p>热门礼物</p>
            </div>
            <div class='gift_container'>
                <el-card class='gift' v-for="item in gifts" :key="item.id" :body-style="{ padding: '0px' }" scope="scope" shadow="never">
                    <img :src='imageFor(item.resource)' class="image">
                    <div class="gift-bottom">
                        <p class="gift-desc">{{item.resourceDesc}} <strong class="price">{{price(item)}}元</strong> </p>
                        <el-button type="primary" plain  @click="handleBuy(item.id)" :to="{ path: '/manage' }">去购买</el-button>
                    </div>
                </el-card>
                <el-card class='gift' v-for="item in pending" :key="item" :body-style="{ padding: '0px' }" scope="scope" shadow="never">
                    
                </el-card>
            </div>

        </div>
    </div>
</template>

<script>
    import headTop from '@/components/headTop'
    import logo from '@/components/Logo'
    import {mapState, mapActions} from 'vuex'
    // import {baseImgPath} from '@/config/env'
    import { getGiftList } from '@/api/gift'
    import { getGiftImage } from '@/utils/constants'

    export default {
      data () {
        return {
        
        }
      },
      mounted () {
        this.initData()
      },
      computed: mapState(['gifts', 'pending']),
      components: {
        headTop,
        logo
      },
      methods: {
        ...mapActions(['getGiftList']),
        async initData () {
        //   this.getGiftList()
          this.getGiftList()
        },

        price(item) {
          if (item.lowPrice === item.highPrice) {
              return (item.lowPrice / 100).toFixed(2)
          }  
          if (item.lowPrice == 0) {
              return (item.highPrice / 100).toFixed(2)
          }

          return `${(item.lowPrice / 100).toFixed(2)}`// ~ ${(item.highPrice / 100).toFixed(2)}`
        },
        handleBuy (id) {
          // this.activities.splice(index, 1)
          this.$router.push({path: 'setAddress', query: { giftId: id }})
        },

        imageFor(resource) {
            return getGiftImage(resource)
        }

      }
    }
</script>

<style lang="less" scoped>
    @import '../../style/mixin';
    .fix-width-frame {
      margin: 0 auto;
      width: 1000px;
    }
    .header_logo {
        margin-top: 80px;
        margin-bottom: 30px;
    }

    .label-title{
        font-weight: bold;
        font-size: 24px;
        color: #222;
        margin-bottom: 30px;
        line-height: 26px;
        padding-bottom: 10px; 
        border-bottom: 1px solid #dcdcdc;
    }

    .time {
        font-size: 13px;
        color: #999;
    }
    .tip {
        color: #555;
        font-size: 12px;
        // margin-bottom: 10px;
        // margin-left: 20px;
    }
    .tip span {
        color: #f82a0f;
        // font-weight: bold;
    }
   
    .price {
      margin-left: 20px;
      color: #f82a0f;
    }
    // .bottom {
        // margin-top: 13px;
        // line-height: 12px;
    // }

    // .button {
    //     padding: 0;
    //     float: right;
    // }

    .image {
        width: 100%;
        display: block;
    }

    // .clearfix:before,
    // .clearfix:after {
    //     display: table;
    //     content: "";
    // }

    .clearfix:after {
        clear: both
    }

    .table_container{
        // padding: 20px;
        margin-top: 70px;
    }

    .Pagination{
        display: flex;
        justify-content: flex-start;
        margin-top: 8px;
    }

    .gift_container {
        display: flex;
        flex-wrap: wrap;
        flex-direction:  row;
        justify-content: space-between;
        align-items: center;
        align-content: flex-start;
    }

    .gift {
        // flex: auto;
        width: 240px;
        margin-bottom: 20px;
        border: none;
        // margin-right: 10px;
    }

    .gift-bottom {
        .gift-desc {
            margin-top: 20px;
            color: #555;
            font-size: 14px;
        }
        .el-button {
            .wh(90px, 32px);
            padding: 0;
            font-size: 12px;
            margin-top: 15px;
            border-radius: 2px;
        }

        margin-bottom: 10px;
    }
</style>
